import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import qs from 'querystring'
import {
  Switch,
  Route,
  Link,
  useHistory,
  useParams,
  useLocation
} from "react-router-dom"


function App() {
  const history = useHistory();
  const GotoAbout=()=>{
    history.push('/about/2/jhq')
  }

  const GotoUsers=()=>{
    // history.push('/users?name=jhq&age=18') 或者
    history.push({pathname:'/users',search:"name=jhq&age=18"})
  }

  const GotoState=()=>{
    history.push({pathname:"/state",state:{name:"jhq",sex:"男"}})
  }
  return (
    <div className="App">

      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            {/* 使用Link 进行路由级别跳转 */}
            <Link to="/about/2/jhq">About</Link>
            {/* 使用js 进行路由基本跳转，与使用Link一样的效果 */}
            <br></br>
            <button onClick={GotoAbout}>使用js跳转About</button>
          </li>
          <li>
            <Link to="/users?name=jhq&age=18">Users</Link>
            <br></br>
            <button onClick={GotoUsers}>使用js跳转User</button>
          </li>
          <li>
            <Link to={{pathname:"/state",state:{name:"jhq",sex:"男"}}}>State</Link>
            <br></br>
            <button onClick={GotoState}>使用js跳转State</button>
          </li>
        </ul>
      </nav>
        <Switch>
          {/* params 传参，注册路由用 :来配置动态路由 */}
          <Route path="/about/:id/:name">
            <About />
          </Route>
    
          <Route path="/users">
            <Users />
          </Route>

          <Route path="/state">
            <State/>
          </Route>

          <Route path="/">
            <Home />
          </Route>

         
        </Switch>


    </div>
  )
}


function Home() {
  return <h2>Home</h2>;
}

// 实现react-router v5 的params 传参


// 优点：刷新页面，参数不丢失
// 1.只能传字符串，传值过多url会变得很长 2. 参数必须在路由上配置
function About() {
  const params = useParams();
  console.log(params);
  return <h2>About</h2>;
}

// 实现react-router v5 的search 传参

// 优点：刷新页面，参数不丢失
// 缺点：只能传字符串，传值过多url会变得很长，获取参数需要自定义hooks或自写切割js
function Users() {
  const location = useLocation(); // location 返回的是pathname(路由路径) + search(也就是我们要获取的传参) + state(后面state传参需要用到)
  // 现在我们就需要将srarch ?name=jhq&age=18 切割成为 { name:"jhq" ,age:"18"}这种形式，下面引入自己写的切割函数。

  const urlenCode = (url) => {
    // 获取?右边的参数 name=tom&age=18
    let strUrl = url.split("?")[1];
    // 将剩下的字符串按照 & 进行切割，返回一个数组形如：[ 'name=jhq', 'age=18' ]
    let params = strUrl.split("&")
    let obj = {} // 创建空对象
    for (let i = 0; i < params.length; i++) {
      // 循环数组，将数组的每一项按 = 符号切割，分别赋给对象的键和值
        let key = params[i].split("=")[0]
        let value = params[i].split("=")[1]
        obj[key] = value
    }
    // 返回这个对象完成整个操作
    return obj
}
const  obj = urlenCode(location.search);
console.log(obj);

  return <h2>Users</h2>;
}

// 实现react-router v5 的state 传参
// 优点：可以传对象
// 缺点：<HashRouter>刷新页面，参数丢失
function State() {
  const location = useLocation();
  const state = location.state;
  console.log(state);
  return(
    <>
     <h1> State</h1>
    </>
  )
}

export default App
